<template>
  <view class="menu">
    <u-tabs
      active-color="#E6425E"
      bar-width="65"
      v-model="currentIndex"
      :height="90"
      :list="menu"
      :is-scroll="false"
      :bar-style="barStyle"
      inactive-color="#666666"
      @change="change"
    ></u-tabs>
    <!-- <view class="item" v-for="(item, index) in menu" :key="index" :class="{ active: index == currentIndex }" @click="itemClick(index)">{{ item }}</view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emit = defineEmits(['change'])

let currentIndex = ref(0)
let menu = [
  {
    name: '全部'
  },
  {
    name: '待支付'
  },
  {
    name: '已报名'
  },
  {
    name: '已完成'
  }
]
const barStyle = {
  background: 'linear-gradient(270deg, #E6425E 0%, #FFC7D0 100%)'
}

const change = (index: number) => {
  currentIndex.value = index
  emit('change', index)
}
</script>

<style lang="scss" scoped>
.active {
  color: #e6425e !important;
  border-bottom: 4rpx solid #e6425e;
}
.menu {
  width: 100%;
  position: fixed;
  background-color: #fff;
  padding: 10rpx 0rpx 0rpx 0rpx;
  .item {
    height: 62rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 50rpx;
  }
}
</style>
